<!DOCTYPE html>
<!--Made with ❤ by XUANZHI-->
<!--该页面已接入百度统计-->
<html>

<head>
    <meta charset="UTF-8">
    <meta name="theme-color" content="#e9f1e9">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>简单计时器</title>
    <!-- Bootstrap -->
    <link href="https://unpkg.zhimg.com/bootstrap@4.4.1/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.staticfile.org/mdbootstrap/4.20.0/css/mdb.min.css">
    <link href="./x-az.css" rel="stylesheet">
  
    <style>
        #m,
        #s {
            font-size: 120px;
        }

        #ms {
            color: gray;
            font-size: 80px;
        }

        .split {
            color: gray;
            display: inline-block;
            transform: translateY(-15px);
            font-size: 100px;
        }

        .timerTimeMore {
            display: none;
        }

        @font-face {
            font-family: num;
            src: url('./number.otf');
        }

        #number {
            font-family: num;
        }

        .infoLabel{
            font-size: 20px;
            color: gray;
        }

        /* 移动设备 */
        @media (max-width: 767px) {

            #m,
            #s {
                font-size: 80px;
            }

            #ms {
                font-size: 60px;
            }

            .split {
                font-size: 60px;
            }

            .infoLabel {
                font-size: 16px;
            }
        }
    </style>
    <script>
        var _hmt = _hmt || [];
        (function () {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?76d748872de14bad7ef88266420d87e4";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>
</head>

<body>
    <br class="brBefore">
    <br class="brBefore">
    <div class="container">
        <div class="card glass"> <br>
            <div class="container">
                <h1 class="text-center" id="titleText">简单计时器</h1>
                <div class="text-center" id="number">
                    <span id="m">00</span>
                    <span class="split">:</span>
                    <span id="s">00</span>
                    &nbsp;
                    <span id="ms">0</span>
                </div>
                <button class="btn btn-success btn-block" id="mainBtn">开始</button>

                <div class="row">
                    <div class="col-md-2 col-3">
                        <div class="mt-4 infoLabel text-center">
                            倒计时
                        </div>
                    </div>
                    <div class="col-md-2 col-2">
                        <div class="md-form">
                            <input type="number" class="form-control setTime" id="setM" value="0" min="0" max="99">
                            <label for="minNum">分</label>
                        </div>
                    </div>
                    <div class="col-md-2 col-2">
                        <div class="md-form">
                            <input type="number" class="form-control setTime" id="setS" value="0" min="0" max="59">
                            <label for="maxNum">秒</label>
                        </div>
                    </div>
                    <div class="col-md-6 col-5 text-center">
                        <button class="btn btn-light mt-3" id="resetBtn">重置</button>
                    </div>
                </div>
                <div class="text-center">
                    <button class="btn btn-light btn-sm timerTime timerTimeMore" data-time="15">
                        15秒
                    </button>
                    <button class="btn btn-light btn-sm timerTime timerTimeMore" data-time="30">
                        30秒
                    </button>
                    <button class="btn btn-light btn-sm timerTime" data-time="60">
                        1分钟
                    </button>
                    <button class="btn btn-light btn-sm timerTime timerTimeMore" data-time="120">
                        2分钟
                    </button>
                    <button class="btn btn-light btn-sm timerTime" data-time="300">
                        5分钟
                    </button>
                    <button class="btn btn-light btn-sm timerTime timerTimeMore" data-time="600">
                        10分钟
                    </button>
                    <button class="btn btn-light btn-sm timerTime timerTimeMore" data-time="900">
                        15分钟
                    </button>
                    <button class="btn btn-light btn-sm timerTime timerTimeMore" data-time="1200">
                        20分钟
                    </button>
                    <button class="btn btn-light btn-sm timerTime timerTimeMore" data-time="1800">
                        30分钟
                    </button>
                    <button class="btn btn-light btn-sm timerTime timerTimeMore" data-time="2400">
                        40分钟
                    </button>
                    <button class="btn btn-light btn-sm timerTime timerTimeMore" data-time="2700">
                        45分钟
                    </button>
                    <button class="btn btn-light btn-sm timerTime timerTimeMore" data-time="3600">
                        1小时
                    </button>
                    <button class="btn btn-light btn-sm" id="toggleTimer">更多</button>
                </div>
            </div>
            <br>
        </div>
    </div>
    <br>
    <br>
    <script src="https://unpkg.zhimg.com/jquery@3/dist/jquery.min.js"></script>
    <script src="https://unpkg.zhimg.com/bootstrap@4.4.1/dist/js/bootstrap.min.js"></script>
    <script src="https://cdn.staticfile.org/mdbootstrap/4.20.0/js/mdb.min.js"></script>
    <script>
        var mode = 1; //1为正计时，-1为倒计时
        var time = 0;
        var isRunning = false;
        var timerInterval;
        function changeMode(m) {
            mode = m;
            if (mode == 1) {
                $("#titleText").fadeOut("", function () {
                    $("#titleText").text("秒表").fadeIn();
                })
            } else {
                $("#titleText").fadeOut("", function () {
                    $("#titleText").text("倒计时").fadeIn();
                })
            }
        }

        setTimeout(function () {
            changeMode(1);
        }, 1000);

        $("#toggleTimer").click(function () {
            if ($(this).text() == "更多") {
                $(this).text("更少")
                    .addClass("btn-success")
                    .removeClass("btn-light");
                $(".timerTimeMore").fadeIn();
            } else {
                $(this).text("更多")
                    .addClass("btn-light")
                    .removeClass("btn-success");
                $(".timerTimeMore").fadeOut();
            }
        });

        function showTime() {
            var ms = time % 10;
            var s = Math.floor(time / 10) % 60;
            var m = Math.floor(time / 600);
            var sText = s < 10 ? "0" + s : s;
            var mText = m < 10 ? "0" + m : m;
            $("#ms").text(ms);
            $("#s").text(sText);
            $("#m").text(mText);
        }

        function setTime(sec) {
            if (sec == 0) {
                if (mode == -1) changeMode(1);
            } else {
                if (mode == 1) changeMode(-1);
            }
            time = sec * 10;
            showTime();
        }

        $(".timerTime").click(function () {
            $("#setM").val(Math.floor($(this).data("time") / 60));
            $("#setS").val($(this).data("time") % 60);
            setTime($(this).data("time"));
        });

        function setMinAndSec() {
            var m = parseInt($("#setM").val());
            var s = parseInt($("#setS").val());
            if (isNaN(m)) m = 0;
            if (isNaN(s)) s = 0;
            setTime(m * 60 + s);
        }
        $(".setTime").on("input", setMinAndSec);

        var sound = new Audio("./sound.mp3");
        var pauseSound = new Audio("./pause.mp3");

        function stopTiming(){
            if (isRunning && mode == -1) {
                setMinAndSec();
            } else {
                setTime(0);
                $("#setM").val("0");
                $("#setS").val("0");
            }

            if (isRunning) {
                clearInterval(timerInterval);
                isRunning = false;
                $("#mainBtn").text("开始")
                    .addClass("btn-success")
                    .removeClass("btn-light");
            }
        }
        
        $("#resetBtn").click(stopTiming);

        function updataTime() {
            time += mode;
            if (time <= 0) {
                stopTiming();
                sound.play();
            }
            showTime();
        }

        $("#mainBtn").click(function () {
            if (isRunning) {
                clearInterval(timerInterval);
                isRunning = false;
                $(this).text("开始")
                    .addClass("btn-success")
                    .removeClass("btn-light");

                pauseSound.play();
            } else {
                timerInterval = setInterval(updataTime, 100);
                isRunning = true;
                $(this).text("暂停")
                    .addClass("btn-light")
                    .removeClass("btn-success");

                sound.currentTime = 0;
                sound.play();
                setTimeout(function () {
                    sound.pause();
                }, 600);
            }
        });

    </script>
</body>

</html>
